import React from 'react';
import { Text, StyleSheet, View, Alert, TouchableOpacity } from 'react-native';

const styles = StyleSheet.create({
  icon: {
    borderRadius: 16,
    borderWidth: 1,
    backgroundColor: '#fff',
    lineHeight: 16,
    height: 16,
    width: 16,
    textAlign: 'center',
    borderWidth: 0,
    color: '#fff'
  },
  iconWrap: {
    width: 44,
    height: 44,
    justifyContent: 'center',
    alignItems: 'center'
  },
  success: {
    backgroundColor: '#f00'
  },
  warning: {
    backgroundColor: '#f60'
  },
  error: {
    backgroundColor: '#f00'
  },
  info: {
    backgroundColor: '#f00'
  },
  waiting: {}
});

export default ({ type, key, msg }) => {
  const text = (_type => {
    switch (_type) {
      case 'success': {
        return '√';
      }
      case 'warning': {
        return '!';
      }
      case 'error': {
        return '×';
      }
      case 'info': {
        return '?';
      }
      case 'waiting': {
        return '-';
      }
    }
  })(type);
  const alertBtn = [{ text: '我知道了' }];
  const alertMsg = (type, msg) => {
    switch (type) {
      case 'success':
      case 'waiting': {
        return;
      }
      case 'error': {
        Alert.alert('错误！', msg, alertBtn);
        break;
      }
      case 'info': {
        Alert.alert('信息', msg, alertBtn);
        break;
      }
      case 'warning': {
        Alert.alert('警告', msg, alertBtn);
        break;
      }
    }
  };
  return (
    <TouchableOpacity
      style={styles.iconWrap}
      onPress={alertMsg.bind(null, type, msg)}
    >
      <Text style={[styles.icon, styles[type]]}>{text}</Text>
    </TouchableOpacity>
  );
};
